<template>
	<div>
		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<span>修改密码</span>
				</li>
			</ul>
		</div>
		<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
			<el-form-item label="原密码" prop="oldPassword">
				<el-input type="password" v-model="ruleForm2.oldPassword" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="newPassword">
				<el-input type="password" v-model="ruleForm2.newPassword" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="checkPass">
				<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm2')">确定</el-button>
				<el-button @click="resetForm('ruleForm2')">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>

    import { SettingSrv } from './setting.service';
    import { CommSrv } from './../../components/commonsrv';
    import { Notification } from 'element-ui';
	export default {
		data() {
            var validatePass = (rule, value, callback) => {

                    if (this.ruleForm2.checkPass !== '') {
                        this.$refs.ruleForm2.validateField('checkPass');
                    }
                    callback();

            };
            var validatePass2 = (rule, value, callback) => {
                if (value !== this.ruleForm2.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
			return {
                userinfo:{},
                ruleForm2: {
                    pass: '',
                    checkPass: ''
                },
                rules2: {
                    oldPassword: [
                        { required: true, message: '请输入原密码'}
                    ],
                    newPassword: [
                        { required: true, message: '请输入密码'},
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { required: true, message: '请再次输入密码'},
                        { validator: validatePass2, trigger: 'blur' }
                    ]
                },

			};
		},
		methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.ruleForm2.id=this.userinfo.id;
                        var params = {};
                        params.id=this.userinfo.id;
                        params.newPassword=this.ruleForm2.newPassword;
                        params.oldPassword=this.ruleForm2.oldPassword;
                        SettingSrv.updatePassword(params).then((result) =>{
                            if(result.code === 0){
                                Notification.success({
                                    title: "修改密码",
                                    message: '操作成功',
                                    offset: 50
                                })
                            }else{
                                Notification.error({
                                    title: "修改密码",
                                    message: '原始密码不对',
                                    offset: 50
                                })
							}
                        })
                    } else {

                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$router.push('/');
//                this.$router.push('/');
//                this.$refs[formName].resetFields();
            }
		},
		created (){
            CommSrv.getUserinfo().then(result => {
                if(result.code === 0) {
                    this.userinfo = result.data;
                }
            })
		}
	}
</script>

<style scoped>
	.el-form {
		width: 500px;
		margin: 0 auto;
		margin-top: 20px;
	}
	
	.el-select {
		width: 100%;
	}
</style>